<!-- 用户名密码登录 -->
<template>
  <div class="login">
    <div class="header">
      <img src="@/assets/images/tx.jpg" alt />
    </div>
    <div class="form">
      <div class="form-item">
        <input type="text" placeholder="用户名" v-model="user_name" />
      </div>
      <div class="form-item">
        <input type="password" placeholder="密码" v-model="user_password" />
      </div>
      <div class="form-item">
        <button @click="loginRequestAPi">用户登录</button>
      </div>
      <div class="form-check">
        <router-link to="/phonelogin">短信登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import Axios from "axios";
// 引入api方法
// import { UserLoginApi } from "@/api/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      user_name: "",
      user_password: "",
    };
  },
  methods: {
    async loginRequestAPi() {
      await this.$store.dispatch("actChangeIsLogin", {
        user_name: this.user_name,
        user_password: this.user_password,
      });
      this.$router.push("/home");
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.login {
  .header {
    display: flex;
    justify-content: center;
    margin-top: 10rem;
    img {
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      border: 10px solid rgba(0, 0, 0, 0.5);
    }
  }
  .form {
    width: 100%;
    height: 50rem;
    // background: red;
    margin-left: 2rem;
    width: calc(100% - 4rem); //减号两边必须有空格
    .form-item {
      margin: 1rem 0;
      input {
        width: 100%;
        height: 3.6rem;
        border: 1px solid #cccccc;
        text-indent: 1rem;
      }
      button {
        width: 100%;
        height: 3.6rem;
        background: #f55;
        color: #fff;
      }
    }
  }
}
</style>